<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>管理界面</title>
    <link rel="stylesheet" href="css/layui.css">
    <script src="layui.js"></script>
</head>

<body>
    <!-- 依赖加载模块：element 
    Example:
     layui.use('element', function () {
            var element = layui.element;
        })
    -->
    <script>
        layui.use('element', function () {
            var element = layui.element;
        })
    </script>
    <div class="layui-layout layui-layout-admin">

        <div class="layui-header">
            <div class="layui-logo layui-bg-cyan">电商管理系统</div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="javascript:;">最新活动</a></li>
                <!-- layui-this  无选择时默认选中 -->
                <li class="layui-nav-item  layui-this"><a href="javascript:;">默认选中</a></li>
                <li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">移动模块</a></dd>
                        <dd><a href="javascript:;">电商平台</a></dd>
                        <dd><a href="javascript:;">后台模板</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">社区</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">控制台<span class="layui-badge">9</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">个人中心<span class="layui-badge-dot"></span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><img src="./images/logo.gif" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child layui-nav-child-c">
                        <dd><a href="javascript:;">修改信息</a></dd>
                        <dd><a href="javascript:;">安全管理</a></dd>
                        <dd><a href="javascript:;">退出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <!-- lay-shrink="all"  展开子菜单时，是否收缩兄弟节点已展开的子菜单 
                Example:<ul class="layui-nav layui-nav-tree" lay-shrink="all"> … </ul>-->
            <ul class="layui-nav layui-nav-tree" lay-shrink="all">
                <li class="layui-nav-item">
                    <a href="javascript:;">无法选中效果</a>
                    <dl class="layui-nav-child">
                        <!-- lay-unselect  点击指定导航菜单时，不会出现选中效果
                        Example:<li class="layui-nav-item" lay-unselect>刷新</li> -->
                        <dd lay-unselect><a href="javascript:;">移动模块</a></dd>
                        <dd><a href="javascript:;">后台模版</a></dd>
                        <dd><a href="javascript:;">电商平台</a></dd>
                    </dl>
                </li>
                <!-- lay-bar:disabled 禁用滑块跟随功能
        Example:<div class="layui-nav" lay-bar="disabled"> </div> -->
                <li class="layui-nav-item" lay-bar="disabled">
                    <a href="javascript:;">滑块禁用</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">移动模块</a></dd>
                        <dd><a href="javascript:;">后台模版</a></dd>
                        <dd><a href="javascript:;">电商平台</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">产品</a></li>
                <li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
            </ul>
        </div>
        <div class="layui-body">
                    <!--            面包屑导航-->
                <span class="layui-breadcrumb" lay-separator=">">
                    <a href="#">界面路径</a>
                    <a href="#">.....</a>
                    <!--    cite--文章标题-->
                     <a href="#"><cite>文章标题</cite></a>
                </span>

        </div>
        <div class="layui-footer layui-bg-blue"></div>
    </div>

</body>

</html>